<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>模版语法</title>

    <script src="./../vue/vue.js"></script>

    <style>
        .bg_blue{
            background-color: blue;
        }

        .bg_red{
            background-color: red;
        }

        #id_div{
            color: blue;
        }

        .onButton[disabled]{
            color: red;
        }
    </style>
</head>
<body>

    <!-- 
        插值
            1、文本             {{ }}
            2、原始HTML         v-html=""
            3、Attribute属性    
            4、使用JavaScript
        指令                v-bind v-for v-if v-else v-else-if v-on v-model
            1、参数
            2、动态参数     :[]=""
            3、修饰符       
            .prevent    阻止默认的事件发生 ，比如 a标签点击会跳转，添加 @click.prevent 阻止这一事件
            .stop       阻止事件冒泡传递
            .capture    捕获阶段触发事件
            .self       只有点击自身才触发事件，防止冒泡的事件响应事件
            .once       只触发一次

        缩写
            1、 v-bind ->  :
            2、 v-on   @
     -->

    <div id="app">

        <div>{{ message }}</div>

        <div>这里显示插入原始HTML <span v-html="insertHTML"></span></div>

        <div>
            <div v-bind:id="divId">绑定属性 id</div>
            <div v-bind:class="divClass">绑定属性 class</div>
            <div>
                <!-- disable 表示不可用 disable为true时不可用 -->
                <input type="button" v-bind:disabled="divDisable" v-on:click="onClickButton" value="按钮">
            </div>
        </div>

        <div>
            <div>{{ showHello?'你好':'不显示Hello' }}</div>

            <div>
                <!-- <input type="button" value="点击" v-on:click="clickFunction?onClickFunction:onClickFunction2"> -->

                <input type="button" value="点击" v-on:click="onClickFunction2">
            </div>
        </div>

        <div>
            <!-- v-bind 是一个指令 -->
            <div>
                <a v-bind:href="a_url">点击链接去</a>

                <!-- 动态 -->
                <a v-bind:[attribute]="a_url">动态参数</a>

                <!-- 修饰符 -->
                <!-- .prevent 阻止默认事件 -->
                <a href="https://www.baidu.com" @click.prevent>百度</a>

                <!-- 
                    .stop 阻止冒泡事件
                 -->
                <div style="border: 1px solid red; width:200px; height: 100px;" @click="onClickOutDiv">
                    <div style="border: 1px solid blue; width:100px; height: 50px;" @click.stop="onClickInnerDiv">
                        .stop
                    </div>
                </div>

                <!-- .capture 捕获阶段响应 -->
                <div style="border: 1px solid red; width:200px; height: 100px;" @click.capture="onClickOutDiv">
                    <div style="border: 1px solid blue; width:100px; height: 50px;" @click="onClickInnerDiv">
                        <div style="border: 1px solid blue; width:50px; height: 25px;" @click="onClickMostInnerDiv">
                            .capture
                        </div>
                    </div>
                </div>
                
                <!-- .self 绑定事件只有点击自身才会执行，防止冒泡阶段执行 -->
                <div style="border: 1px solid red; width:200px; height: 100px;" @click.self="onClickOutDiv">
                    <div style="border: 1px solid blue; width:100px; height: 50px;" @click="onClickInnerDiv">
                        .self
                    </div>
                </div>
                <!-- .once 只能执行一次 -->
                <div>
                    <input class="onButton" type="button" value="按钮" :disabled="buttonDisabled" @click.once="onClickButtonOnce">
                </div>

            </div>
        </div>


        <div>
            <!-- 缩写 -->
            <img :src="image" :alt="alt" @click="onClickImage">
        </div>
        
    </div>
    
    <script>

        let vm = new Vue({
            el: "#app",
            data: {
                message: "托尔斯泰",
                insertHTML: "<span style='color: red;'>这里是红色的</span>",
                divClass: "bg_blue",
                divId:"id_div",
                divDisable: true,
                showHello: false,
                clickFunction: false,
                a_url: "https://www.baidu.com",
                attribute: "title",
                image: "./../img/wx_cz.jpg",
                alt: "图片未加载出来时的显示",
                buttonDisabled: false
            },
            methods: {
                onClickButton(){
                    console.log("onClickButton")
                },
                onClickFunction(){
                    console.log("onClickFunction")
                },
                onClickFunction2(){
                    console.log("onClickFunction222")
                },
                onClickImage(){
                    console.log("onClickImage")
                },
                onClickOutDiv(){
                    console.log("onClickOutDiv")
                },
                onClickInnerDiv(){
                    console.log("onClickInnerDiv")
                },
                onClickMostInnerDiv(){
                    console.log("onClickMostInnerDiv")
                },
                onClickButtonOnce(){
                    console.log("只触发一次")
                    this.buttonDisabled = true
                }
                
            },
        })

    </script>
</body>
</html>